body{
    font-family: 'UKIJ Qolyazma';
    direction: rtl;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
    background-color: #f0f0f0;
}
.grid-container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: center;
    width: 60%;
    margin: 5rem auto;
    border: solid 1px purple;
}
.card{
    height: 12rem;
    width: 12rem;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 1s;
    cursor: pointer;
    background: #eb8f26;
    border-radius: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1rem;
}
.card:hover{
    transform: rotate(180deg);
}
.card:hover .lttr{
    display: none;
}
.card:hover .description{
    display: flex;
}

.lttr{
    height: 10rem;
    width: 10rem;
    font-size: 6rem;
    /* mix-blend-mode: difference; */
    /* filter: invert(25%); */
    color: white;
    /* text-shadow: #FC0 1px 0 10px; */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
}
.description{
    height: 10rem;
    width: 10rem;
    display: none;
    font-size: 2rem;
    color: white;
    mix-blend-mode: difference;
    filter: invert(25%);
    justify-content: center;
    align-items: center;
}